<template>
  <div class="btd-profile select-none">
    <div class="btd-tool">
      <div class="tool-btn float-right p-4">
        <template v-if="true">
          <el-button
            size="large"
            round
            v-for="item in platforms"
            :key="item.code"
            @click="handler(item)"
          >
            <strong>{{ item.name }}</strong>
          </el-button>
        </template>
        <!-- <template v-else>
          <el-button size="large" round @click="onLogin">
            <strong>登录</strong>
          </el-button>
        </template> -->
      </div>
    </div>
    <div class="header h-162 pl-30">
      <div class="header-content min-w-240">
        <div class="text-2xl leading-10">蜂舟开发平台</div>
        <div class="text-2xl leading-10">
          可视化开发工具，高效构建数据模型、页面和业务流程，项目自动部署
        </div>
        <div class="text-6xl leading-20">敏捷高效，助力企业数字化转型</div>
      </div>
    </div>
    <div class="content">
      <div class="introduce px-8 py-6 w-300">
        <div class="w-full text-xl"><strong>产品介绍</strong></div>
        <div class="flex justify-between items-center">
          <div class="h-full w-183 text-sm">
            <div>
              <div class="leading-6">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                蜂舟开发平台，是系统快速开发生成工具，赋能企事业客户信息化系统高质高效的搭建。蜂舟为业务人员、专业人员、开发人员高效设计系统提供工具支持；使用者可以通过无代码或少量代码完成企业系统平台的功能构建及部署。
              </div>
              <div class="leading-6">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                相比传统的软件系统开发，通过蜂舟开发平台设计的系统门槛更低，效率更高，扩展性更好，无需关注服务器、数据库等底层运维部署，使用者只需要关注业务本身，即可完成企业核心业务系统的开发需求。
              </div>
              <div class="leading-6">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                蜂舟开发平台是基于符合模型驱动开发理念，通过实体模型+页面模板的可视化构建方式，快速构建各种类型的应用。蜂舟平台内置了模型引擎、数据引擎、策略引擎、表单引擎、流程引擎，通过自动化构建快速生成应用，为企业数字化提供全方位支撑。
              </div>
            </div>
          </div>
          <div class="w-83">
            <!-- <img class="w-full h-full" draggable="false" :src="introducePlaceUrl" /> -->
          </div>
        </div>
      </div>
      <div>
        <div class="w-full pt-10 pl-8 text-xl"><strong>产品特点</strong></div>
        <div class="feature px-8 py-6 w-300">
          <div class="flex space-x-6">
            <div class="w-78 h-74 feature-one">
              <div class="h-9 py-2 px-4 bg-[#ABC0F8] absolute-one">模型驱动</div>
              <div class="h-9 py-2 px-4 bg-[#E9EEFD] absolute-two">拖拽式开发</div>
              <div class="h-9 py-2 px-4 bg-[#7496F4] absolute-three">项目自动部署</div>
              <div class="h-9 py-2 px-4 bg-[#E9EEFD] absolute-four">SDK集成</div>
              <div class="h-9 py-2 px-4 bg-[#F0F4FE] absolute-five">架构安全</div>
              <div class="h-9 py-2 px-4 bg-[#BECEFA] absolute-six">脚本语言</div>
            </div>
            <div class="w-60 h-74 bg-[#E9F2FF]">
              <div class="feature-two">
                <div class="pb-6 text-base">
                  <strong>系统集成</strong>
                </div>
                <div class="text-sm leading-7">
                  提供所见及做多的拖拽开发模式，平台实现大量通用组件、业务组件;集成SDK;提供开放API。
                </div>
              </div>
            </div>
            <div class="w-60 h-74 bg-[#E9F2FF]">
              <div class="feature-three">
                <div class="pb-6 text-base">
                  <strong>快速开发</strong>
                </div>
                <div class="text-sm leading-7">
                  提供一站式解决方案，打通后端数据模型；无需关注前端工程化细节，快速开发页面，生成整体系统。
                </div>
              </div>
            </div>
            <div class="w-70 h-74 bg-[#E9F2FF]">
              <div class="feature-four">
                <div class="pb-6 text-base">
                  <strong>灵活扩展</strong>
                </div>
                <div class="text-sm leading-7">
                  灵活、弹性的零代码、低代码开发模式，通过可视化搭建快速实现界面效果；通过代码实现复杂自定义逻辑，无需关注服务器、数据库等底层运维、计算设备，实现功能快速上线。
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="product-target mt-5">
        <div class="p-8 w-300">
          <div class="text-xl pb-4"><strong>产品目标</strong></div>
          <div class="text-sm leading-6 pb-15">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;蜂舟开发平台通过实践模型驱动开发理念，运用零代码/低代码开发模式，通过图形化、可视化业务建模，以极低的学习成本让业务人员直接参与到应用的构建过程，达到人人都是开发者，传统企业是数字化转型应用的塑造者。
          </div>
          <div class="target-content space-x-4">
            <div class="target-safety">
              <bt-svg-icon
                class="cursor-pointer"
                name="svg-profile-safety"
                icon-class="profile-icon-cls"
              />
              <div class="py-6 text-2xl">
                <strong>安全</strong>
              </div>
              <div class="h-24">
                <div class="flex items-center">
                  <div>
                    <canvas class="myDot1" width="20" height="20" />
                  </div>
                  <div class="pl-1 leading-8">开源免费</div>
                </div>
                <div>
                  <div class="flex items-center">
                    <div>
                      <canvas class="myDot2" width="20" height="20" />
                    </div>
                    <div class="pl-1 leading-8">自主可控</div>
                  </div>
                </div>
                <div>
                  <div class="flex items-center">
                    <div>
                      <canvas class="myDot3" width="20" height="20" />
                    </div>
                    <div class="pl-1 leading-8">安全架构认证</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="target-tech leading-7">
              <bt-svg-icon
                class="cursor-pointer"
                name="svg-profile-tech"
                icon-class="profile-icon-cls"
              />
              <div class="py-6 text-2xl">
                <strong>技术</strong>
              </div>
              <div class="h-24">
                <div class="flex items-center">
                  <div>
                    <canvas class="myDot4" width="20" height="20" />
                  </div>
                  <div class="pl-1 leading-8">主流技术框架</div>
                </div>
                <div>
                  <div class="flex items-center">
                    <div>
                      <canvas class="myDot5" width="20" height="20" />
                    </div>
                    <div class="pl-1 leading-8">多码化支持</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="target-cost">
              <bt-svg-icon
                class="cursor-pointer"
                name="svg-profile-cost"
                icon-class="profile-icon-cls"
              />
              <div class="py-6 text-2xl">
                <strong>成本</strong>
              </div>
              <div class="h-24">
                <div class="flex items-center">
                  <div>
                    <canvas class="myDot6" width="20" height="20" />
                  </div>
                  <div class="pl-1 leading-8">降低开发成本</div>
                </div>
                <div>
                  <div class="flex items-center">
                    <div>
                      <canvas class="myDot7" width="20" height="20" />
                    </div>
                    <div class="pl-1 leading-8">减少人力投入</div>
                  </div>
                </div>
                <div>
                  <div class="flex items-center">
                    <div>
                      <canvas class="myDot8" width="20" height="20" />
                    </div>
                    <div class="pl-1 leading-8">改善团队结构</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="target-efficiency">
              <bt-svg-icon
                class="cursor-pointer"
                name="svg-profile-efficiency"
                icon-class="profile-icon-cls"
              />
              <div class="py-6 text-2xl">
                <strong>效率</strong>
              </div>
              <div class="h-24">
                <div class="flex items-center">
                  <div>
                    <canvas class="myDot9" width="20" height="20" />
                  </div>
                  <div class="pl-1 leading-8">缩短交付周期</div>
                </div>
                <div>
                  <div class="flex items-center">
                    <div>
                      <canvas class="myDot10" width="20" height="20" />
                    </div>
                    <div class="pl-1 leading-8">提高敏捷程度22</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <devops title="平台协同" />

      <customer title="面向用户" />
    </div>
    <div class="floor" />
  </div>
  <el-backtop :bottom="100">
    <div
      style="
        width: 100%;
        height: 100%;
        line-height: 40px;
        color: #1989fa;
        text-align: center;
        background-color: var(--el-bg-color-overlay);
        box-shadow: var(--el-box-shadow-lighter);
      "
    >
      UP
    </div>
  </el-backtop>
</template>

<script setup lang="ts">
import { platforms, type Platform } from '../../../mock'

import { onMounted } from 'vue'
// import { loadSite } from '@/usage/utils/utils'
// import introducePlace from '@/assets/images/profile/introduce-place.png'
import devops from './profile/devops.vue'
import customer from './profile/customer.vue'
import { BtUseAppStore } from 'beeboat-ui/es/core'
import { useBaseStore } from '@/stores/base/index'

import { useRouter } from 'vue-router'
const router = useRouter()

const baseStore = useBaseStore()
// const introducePlaceUrl = loadSite(introducePlace).href
const appStore = BtUseAppStore()
const application = appStore.getApp()
// const token = application.getToken()

// const onWorkBench = () => {
//   layoutStore.setWorkBenchActive('AppDesigner')
//   application.$router.push('/micro-page')
// }

const handler = (item: Platform) => {
  //   if (item.routerView == '/designer-view') {
  //     baseStore.setAppControl(false)
  //   } else {
  //     baseStore.setAppControl(true)
  //   }
  baseStore.setPlatformActive({
    module: item.code,
    url: item.url
  })
  router.push(item.routerView)
}

const onLogin = () => {
  application.$router.push('/login')
}
onMounted(() => {
  function drawDot(name: string) {
    const c: HTMLCanvasElement | null = document.querySelector(name)
    const ctx = c?.getContext('2d')
    ctx?.beginPath()
    ctx?.arc(10, 10, 4, 0, 2 * Math.PI, false)
    ctx && (ctx.fillStyle = '#3e4a6b')
    ctx?.fill()
  }
  for (let i = 1; i <= 10; i++) {
    drawDot(`.myDot${i}`)
  }
})
</script>
<style>
.profile-icon-cls {
  width: 4em;
  height: 4em;
}
</style>
<style scoped lang="scss">
.btd-profile {
  position: relative;
  width: 100%;
  background-color: #f9f9f9;
  .btd-tool {
    position: absolute;
    width: 100%;
    height: 60px;
    color: #ffffff;
    .tool-btn {
      cursor: pointer;
      // opacity: 0.6;
    }
  }
  .header {
    display: flex;
    align-items: center;
    width: 100%;
    background: url('@/assets/images/profile/banner-top.png');
    background-repeat: no-repeat;
    background-size: cover;
    .header-content {
      display: flex;
      flex-direction: column;
      color: #ffffff;
    }
  }
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #3e4a6b;
    .introduce {
      margin-top: 20px;
      background-color: #ffffff;
    }
    .feature {
      position: relative;
      margin-top: 15px;
      background-color: #ffffff;
      .feature-one {
        position: relative;
        font-size: 15px;
        > div {
          position: absolute;
          border-radius: 4px;
        }
        .absolute-one {
          top: 46px;
          left: 60px;
        }
        .absolute-two {
          top: 72px;
          left: 195px;
        }
        .absolute-three {
          top: 118px;
          left: 110px;
        }
        .absolute-four {
          top: 164px;
          left: 76px;
        }
        .absolute-five {
          top: 177px;
          left: 208px;
        }
        .absolute-six {
          top: 237px;
          left: 76px;
        }
      }
      .feature-two {
        width: 100%;
        height: 100%;
        padding: 0 35px;
        padding-top: 52px;
        background: url('@/assets/images/profile/feature-two.png');
        background-repeat: no-repeat;
        background-size: cover;
      }
      .feature-three {
        width: 100%;
        height: 100%;
        padding: 0 29px;
        padding-top: 52px;
        background: url('@/assets/images/profile/feature-three.png');
        background-repeat: no-repeat;
        background-size: cover;
      }
      .feature-four {
        width: 100%;
        height: 100%;
        padding: 0 27px;
        padding-top: 52px;
        background: url('@/assets/images/profile/feature-four.png');
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
    .product-target {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      background-color: #ffffff;
      .target-content {
        display: flex;
        width: 100%;
        .target-safety,
        .target-tech,
        .target-cost,
        .target-efficiency {
          display: flex;
          flex: 1 1 0%;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 280px;
          border: 2px solid #f9f9f9;
        }
      }
    }
  }
  .floor {
    width: 100%;
    height: 500px;
    margin-top: 20px;
    background: url('@/assets/images/profile/worth.png');
    background-repeat: no-repeat;
    background-size: 100% 500px;
  }
}
</style>
